<template>
	<div id="templ">
		<div id="desc">
			<!--图片详情- 标题部分-->
			<div class="title">
				<h4>{{list.title}}</h4>
				<p>
					{{list.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}  {{list.click}}次浏览
				</p>
				<p class="line"></p>
			</div>

			<!--缩略图-->
			<div class="mui-content">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li  v-for="(item, index) in imgs" class="mui-table-view-cell mui-media mui-col-xs-4">
						<img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, imgs)">
					</li>
				</ul>
			</div>

			<!--图片详情- 摘要部分-->
			<p v-html="list.content"></p>
		</div>

		<comment :id1="id"></comment>
	</div>
	
</template>


<script>
	import comment from "../subcom/comment.vue"
	export default {
		data:function(){
			return {
				id:"",
				list:{},
				imgs:[]
			}
		},
		methods:{
			getid:function(){
				this.id = this.$route.params.id;
			},
			gettext:function(){
				var url = this.$common.apidomain+"/api/getimageinfo/"+this.id;
				this.$http.get(url).then(function(res){
					this.list = res.body.message[0];
				})
			},
			getimg:function(){
				var url ="http://182.254.146.100:8899/api/getthumimages/"+this.id;
				this.$http.get(url).then(function(res){
					res.body.message.forEach(function(item){
						var img = document.createElement("img");
						img.src = item.src;
						item.h = img.height;
						item.w = img.width;
					})

					this.imgs = res.body.message;
				})
			}
		},
		created:function(){
			this.getid();
			this.gettext();
			this.getimg();
		},
		components:{
			comment
		}
	}


</script>



<style scoped>
  /*图片详情样式*/
  #desc{
	  padding: 10px;
  }
	#desc  .title h4{
		color: #0094ff;
	}

  #desc .title p{
	color:rgba(0,0,0,0.4);
	  margin-top: 10px;
  }

  #desc .title .line{
	  width: 100%;
	  height: 1px;
	  border-bottom: 1px solid rgba(0,0,0,0.4);
  }

  .mui-content,.mui-content ul{
	  background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
	  border-right:0px;
	  border-bottom:0px;
  }
  .mui-grid-view.mui-grid-9{
	  border-top:0px;
	  border-left:0px;
  }

  /* 9宫格缩略图的样式*/
	.mui-content img {
		width: 100px;
		height: 100px;
	}
</style>